<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-12 22:23:17
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-17 23:47:54
 * @FilePath: /chat-ai-plus/src/pages/mobile/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-10 22:33:58
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-11 22:58:08
 * @FilePath: /chat-ai-plus/src/pages/mobile/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <scroll-view :scroll-top="0" scroll-y="true" class="full">
  <view class="container border-box py_lg">
    <view class="row justify-content-center">
      <view class="col-12 col-sm-8 col-md-6 col-xl-4">
        <view class="py_lg">
          <view class="h1 weight_bolder color_darker"
            >{{ $t('mobile.heading') }}
          </view>
          <view class="color_light">{{ $t('mobile.subheading') }}</view>
        </view>
        <u-form class="mt_lg" :model="formState" :rules="rules">
          <u-form-item prop="phoneOrEmail">
            <u-input
              :placeholder="$t('mobile.form.phone.placeholder')"
              v-model="formState.phoneOrEmail"
              prefixIcon="email-fill"
            ></u-input>
          </u-form-item>

          <u-form-item prop="type">
            <u-input
              :placeholder="$t('mobile.form.verification.placeholder')"
              v-model="formState.captcha"
              prefixIcon="lock-fill"
            >
              <template #suffix>
            
                <u-button
                  @tap="handleGetCode"
                  :text="codeHint"
                  :disabled="countdown > 0 || !formState.phoneOrEmail"
                  class="input-btn"
                ></u-button>
              </template>
            </u-input>
          </u-form-item>

          <u-form-item class="mt_lg">
            <u-button
              type="primary"
              @click="handleLogin"
              :text="$t('mobile.form.submit')"
              shape="circle"
            ></u-button>
          </u-form-item>
        </u-form>
        <view class="align-items_center justify_between">
          <view class="align-items_center"
            >{{ $t('mobile.hint') }}
            <u-link
              href="javascript:"
              @click="navigateTo('register')"
              :text="$t('mobile.register')"
            ></u-link
          ></view>
          <view>
            <u-link
              href="javascript:"
              @click="navigateTo('retrieve')"
              :text="$t('mobile.forgot')"
            ></u-link
          ></view>
        </view>
      </view>
    </view>
  </view>
</scroll-view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { navigateTo } from '@/utils/uni';
import { useFormState } from './hooks';
import { useNavigationBar } from '@/pages/hooks';
export default defineComponent({
  name: 'MobileLogin',
  setup() {
    useNavigationBar('mobile')
    const { formState, rules, countdown, codeHint, handleGetCode, handleLogin } = useFormState();

    return {
      navigateTo,
      formState,
      rules,
      countdown,
      codeHint,
      handleGetCode,
      handleLogin,
    };
  },
});
</script>

<style lang="scss" scoped>

</style>

